<template>
  <div>
    <!-- 这是消息中心 -->
    <!-- 书写标题头 -->
    <div class="order_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>消息中心</span>
      <span>排序<van-icon name="sort" /></span>
    </div>
    <!-- tab导航 -->
    <van-tabs v-model="active" color="#FFCC33" @click="MessageChange">
      <van-tab title="全部消息" :dot="doaadd.length !== 0"> </van-tab>
      <van-tab title="系统消息" :dot="doaadd.length !== 0"> </van-tab>
      <van-tab title="个人消息" :dot="doaadd.length !== 0"> </van-tab>
    </van-tabs>
    <!-- 列表内容 -->
    <ul>
      <li v-for="item in records" :key="item.id" @click="isReaded(item.id)">
        <div class="msgimg">
          <img :src="imgOne" alt="" />
          <img :src="imgThree" alt="" class="zhidu" v-if="item.isReader == 1" />
        </div>
        <div class="msginf">
          <div class="contUse">
            <h3>
              {{ item.title }}
              <img :src="imgTwo" alt="" v-if="item.top == 1" />
            </h3>
            <span>发布人:</span>
            <span>{{ item.sourceName }}</span>
          </div>
          <div class="contTim">
            <span>{{ item.createTime }}</span>
            <span>&gt;</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 当消息为空时显示 -->
    <van-empty description="暂无消息" v-if="records.length == 0" />
    <!-- 详情页 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetMessageList } from "@/request/api";
export default {
  data() {
    return {
      active: 0,
      imgOne: require("@/assets/ling.png"),
      imgTwo: require("@/assets/zhiding.png"),
      imgThree: require("@/assets/zhiidu.png"),
      // 消息列表
      records: [],
    };
  },
  props: ["dot"],
  // watch: {
  //   active: {
  //     handler(val1, val2) {
  //       GetMessageList({
  //         current: 1,
  //         size: 20,
  //         type: this.active,
  //       }).then((res) => {
  //         console.log(res.data);
  //         this.records = res.data.records;
  //         // this.$router.go(0);
  //       });
  //     },
  //     immediate: true,
  //   },
  // },

  created() {
    GetMessageList({
      current: 1,
      size: 20,
      type: this.active,
    }).then((res) => {
      console.log(res.data);
      this.records = res.data.records;
    });
    // this.MessageChange();
  },
  methods: {
    MessageChange() {
      GetMessageList({
        current: 1,
        size: 20,
        type: this.active,
      }).then((res) => {
        console.log(res.data);
        this.records = res.data.records;
      });
    },
    isReaded(val) {
      // 跳转到详情页面
      this.$router.push("/message/messageinfo?id=" + val);
    },
    fanhui() {
      this.$router.go(-1);
    },
  },
  computed: {
    doaadd() {
      return this.records.map((item) => {
        return item.isReaded == 1;
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 头部样式 */
.order_title {
  width: 100%;
  height: 0.5rem;
  background-color: #003399;
  color: white;
  padding: 0.2rem 0.2rem 0.1rem;
  box-sizing: border-box;
  font-size: 0.18rem;
  display: flex;
  justify-content: space-between;
  .van-icon {
    vertical-align: -0.03rem;
  }
}
/* 消息列表的样式 */
ul {
  width: 100%;
  margin-top: 0.1rem;
  background-color: white;
  li {
    height: 0.6rem;
    width: 100%;
    padding: 0.1rem;
    /* margin-left: 0.1rem; */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .msgimg {
      height: 100%;
      position: relative;
      img {
        height: 100%;
        padding: 0 0.1rem;
      }
      .zhidu {
        height: 0.1rem;
        position: absolute;
        left: 30px;
      }
    }
    .msginf {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: space-between;
      span {
        color: #aaa;
        &:nth-child(1) {
          padding-right: 0.05rem;
        }
      }
      .contUse {
        line-height: 0.2rem;
        h3 {
          img {
            height: 15px;
          }
        }
      }
      .contTim {
        line-height: 0.4rem;
      }
    }
  }
}
</style>